<template>
  <div id="ContainerAside">
    <el-menu
      :default-active="currentRouterId"
      class="el-menu-vertical-demo"
      background-color="rgb(50, 64, 86)"
      text-color="rgb(203, 206, 212)"
      active-text-color="rgb(82, 155, 254)"
      :collapse-transition="false"
    >
      <el-menu-item
        v-for="item in itemsHasNoChildren"
        :key="item.id"
        :index="item.id"
        :disabled="
          item.title == '管理其他管理员' && !isSuperAdmin ? true : false
        "
        @click="clickMenu(item)"
      >
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title" v-show="collapse">{{ item.title }}</span>
      </el-menu-item>

      <el-submenu
        v-for="item in itemsHasChildren"
        :key="item.id"
        :index="item.id"
      >
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span v-show="collapse">{{ item.title }}</span>
        </template>
        <el-menu-item
          v-show="collapse"
          v-for="subItem in item.children"
          :key="subItem.id"
          :index="subItem.id"
          class="el-menu-item-option"
          @click="clickMenu(subItem)"
          >{{ subItem.title }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { nanoid } from "nanoid";

export default {
  name: "ContainerAside",
  data() {
    return {
      itemsHasNoChildren: [
        {
          id: nanoid(),
          title: "首页",
          icon: "s-home",
          path: "/home",
        },
        {
          id: nanoid(),
          title: "用户管理",
          icon: "s-custom",
          path: "/user",
        },
        {
          id: nanoid(),
          title: "店铺管理",
          icon: "s-shop",
          path: "/shop",
        },
        {
          id: nanoid(),
          title: "商品管理",
          icon: "s-goods",
          path: "/goods",
        },
        {
          id: nanoid(),
          title: "种类管理",
          icon: "s-cooperation",
          path: "/type",
        },
        {
          id: nanoid(),
          title: "活动管理",
          icon: "message-solid",
          path: "/activity",
        },
        {
          id: nanoid(),
          title: "管理其他管理员",
          icon: "document",
          path: "/admin",
        },
      ],
      itemsHasChildren: [
        {
          id: nanoid(),
          title: "销售统计",
          icon: "s-marketing",
          children: [
            {
              id: nanoid(),
              title: "店铺统计",
              path: "/countShop",
            },
            {
              id: nanoid(),
              title: "商品统计",
              path: "/countGoods",
            },
          ],
        },
      ],
    };
  },
  methods: {
    ...mapActions("ContainerHeader", ["selectMenu"]),
    clickMenu(item) {
      // 处理点击同一个菜单项两次会报错的问题
      if (
        this.$route.path !== item.path &&
        !(this.$route.path === "/home" && item.path === "/")
      ) {
        this.$router.push({
          path: item.path,
        });
      }
      // 变换面包屑
      const index = this.tableList.findIndex((key) => key.title === item.title);
      // 不存在，需要添加
      if (index === -1) {
        this.selectMenu(item);
      }
    },
  },
  computed: {
    ...mapState("ContainerAside", ["collapse", "isSuperAdmin"]),
    ...mapState("ContainerHeader", ["tableList"]),
    // 用来设定当前激活的菜单
    currentRouterId: {
      get() {
        for (const item of this.itemsHasChildren) {
          for (const child of item.children) {
            if (this.$route.path == child.path) return child.id;
          }
          if (this.$route.path == item.path) return item.id;
        }
        for (const item of this.itemsHasNoChildren) {
          if (this.$route.path == item.path) return item.id;
        }
      },
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
#ContainerAside {
  height: 100%;
  .el-menu-vertical-demo {
    height: 100vh;
    /deep/.el-submenu__title {
      &:hover {
        background-color: rgb(40, 52, 69) !important;
        color: #fff !important;
      }
    }
    .el-menu-item {
      &:hover {
        background-color: rgb(40, 52, 69) !important;
        color: #fff !important;
      }
    }
    .el-menu-item-option {
      background-color: rgb(33, 45, 61) !important;
      &:hover {
        background-color: rgb(3, 20, 40) !important;
      }
    }
  }
}
</style>